<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<h:head>
        <title>Bank of Quebec</title>
    </h:head>
    <h:body>
    	<h:outputStylesheet library="css" name="inputStyle.css" />
    	<p:layout fullPage="true">
            <p:layoutUnit position="north" size="268" resizable="false" closable="false" collapsible="false">
            	<div id="container" style="width:1145px">
	 				<div>
	 					<h:graphicImage library="images" name="main_buttons.png" />
	 					<h:form>
	 						<h:commandButton action="checkings_savings_account_description"  image="/resources/images/checkings_savings_button.png" style="position: absolute; left: 50px; top: 220px;"/>
	 						<h:commandButton action="credit_card_description"  image="/resources/images/credit_card_button.png" style="position: absolute; left: 400px; top: 218px;"/>
	 						<h:commandButton action="investment_account_opening"  image="/resources/images/investing_button.png" style="position: absolute; left: 700px; top: 218px;"/>
	 					</h:form>
	 				</div>
	 			</div>
            </p:layoutUnit>
            <p:layoutUnit position="west" size="100" resizable="false" closable="false" collapsible="false">
            </p:layoutUnit>
            <p:layoutUnit position="center">
            	<div id="container_main" style="width:700px">
	            	<h:form>
		                <ui:insert name="content">
		                	<center><p class="title_boq">Savings And Checkings Account Opening</p></center>
				 		<table align="center">
				 		  <tr>
						    <td>Savings Account Annual Interest Rate</td>
						    <td>
						    	<h:outputText id="annualPercentageRate"
						    		value="#{checkingsSavingsAccountOpeningManagedBean.savingsAccount.annualInterestRate}%">
						    	</h:outputText>	
						    </td>
						  </tr>
						  <tr>
						  	<td colspan="2" align="center">
						  		<h:commandButton value="Open" action="#{checkingsSavingsAccountOpeningManagedBean.openAccount}" image="/resources/images/open_button.png"/>
						  	</td>
						  </tr>
						</table>
						<h:messages style="color:red;margin:8px;" />
		                </ui:insert>
	                </h:form>
	            </div>
            </p:layoutUnit>
        </p:layout> 
    </h:body>
</html>